<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智慧交通大数据平台</title>
    <link rel="shortcut icon" type="favicon.ico" href="./images/ICO.ico">

    <link rel="stylesheet" href="css/index.css" />

    <script src="./js/jQuery.min.js"></script>
  </head>
  <body>
    <div class="ioading"></div>
    <div class=".body">
      <header>
        <div class="buttons">
          <button class="but1">智慧交通</button>
          <button class="but2">智慧出行</button>
          <span class="but3">武汉市</span>
          <span class="weather"></span>
          <span>武汉市</span>

             </div>
        <h1>智慧交通数据可视化平台</h1>
        <!-- 按钮部分 -->

        <div class="showTime"></div>
      </header>
      <script>
        (function () {
  let t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5

    if (!!window.ActiveXObject || "ActiveXObject" in window) {
      if (t != 1) {
        // 如果在笔记本中用IE浏览器打开 则弹出提示
        alert('您的设备对显示进行放大导致页面显示不完全,请调整后打开/或用其他浏览器')
      }
    } else {
      if (t != 1) {   // 如果进行了缩放，也就是不是1
        let c = document.querySelector('body')
        c.style.zoom = -0.62 * t + 1.55;   // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
      }
    }
  
})();
        let t = null;
        time()
        t = setTimeout(time, 1000); //開始运行
        function time() {
          clearTimeout(t); //清除定时器
          dt = new Date();
          let y = dt.getFullYear(); 
          let mt = dt.getMonth() + 1;
          let day = dt.getDate();
          let h = dt.getHours(); //获取时
          h = h < 10 ? "0" + h : h;
          let m = dt.getMinutes(); //获取分
          m = m < 10 ? "0" + m : m;
          let s = dt.getSeconds(); //获取秒
          s = s < 10 ? "0" + s : s;
          document.querySelector(".showTime").innerHTML =
            // "当前时间：" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
      </script>

      <!-- 页面主体部分 -->
      <section class="mainbox">
        <div class="column">
          <div class="panel bar">
            <h2>智慧交通数据中心</h2>
            <!-- 图表bar -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line">
            <h2>武汉地铁站流量实时监控</h2>
            <!-- 图表line -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel pie">
            <h2>武汉市各区域拥堵指数</h2>
            <!-- 图表pie -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="column">
          <!-- no 数字模块制作 -->
          <div class="no">
            <div class="no-hd">
              <ul>
                <li>512031</li>
                <li>35451</li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>武汉市道路车辆统计</li>
                <li>拥堵区域数量统计</li>
              </ul>
            </div>
          </div>
          <!-- 地图模块 -->
          <div class="map">
            <!-- 背景图片 -->
            <div class="map1"></div>
            <!-- 旋转背景1 -->
            <div class="map2"></div>
            <!-- 旋转逆时针 -->
            <div class="map3"></div>
            <!-- 地图 -->
            <div class="chart"></div>
          </div>
        </div>
        <div class="column">
          <div class="panel bar2">
            <h2>武汉市出行拥堵指南</h2>
            <!-- 图表bar -->
            <div class="chart">
              <!-- 监控区域模块制作 -->
              <div class="monitor">
                <div class="inner">
                  <div class="content" style="display: block">
                    <div class="head">
                      <span class="col">时间</span>
                      <span class="col">地区/路段</span>
                      <span class="col">拥堵指数</span>
                      <span class="col">说明</span>
                    </div>
                    <div class="marquee-view">
                      <div class="marquee">
                        <div class="row">
                          <span class="col timer">11:15</span>
                          <span class="col">江汉路</span>
                          <span class="col">80%</span>
                          <span class="col">较差</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">11:20</span>
                          <span class="col">街道口</span>
                          <span class="col">70%</span>
                          <span class="col">较差</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">11:30</span>
                          <span class="col">楚河汉街</span>
                          <span class="col">50%</span>
                          <span class="col">一般</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">11:35</span>
                          <span class="col">黄家湖地铁小镇</span>
                          <span class="col">20%</span>
                          <span class="col">良好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">12:10</span>
                          <span class="col">光谷步行街</span>
                          <span class="col">50%</span>
                          <span class="col">一般</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">13:50</span>
                          <span class="col">军运村</span>
                          <span class="col">10%</span>
                          <span class="col">较好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">14:00</span>
                          <span class="col">珞喻路</span>
                          <span class="col">30%</span>
                          <span class="col">良好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">15:20</span>
                          <span class="col">中百广场</span>
                          <span class="col">30%</span>
                          <span class="col">较好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">15:30</span>
                          <span class="col">金银潭</span>
                          <span class="col">40%</span>
                          <span class="col">良好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">12:00</span>
                          <span class="col">武汉大学</span>
                          <span class="col">80%</span>
                          <span class="col">较差</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">11:30</span>
                          <span class="col">螃蟹岬</span>
                          <span class="col">60%</span>
                          <span class="col">一般</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">11:20</span>
                          <span class="col">湖北大学</span>
                          <span class="col">20%</span>
                          <span class="col">良好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">9:00</span>
                          <span class="col">武昌火车站</span>
                          <span class="col">70%</span>
                          <span class="col">较差</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">9:30</span>
                          <span class="col">建安街</span>
                          <span class="col">30%</span>
                          <span class="col">良好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">9:35</span>
                          <span class="col">中南路</span>
                          <span class="col">20%</span>
                          <span class="col">良好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">9:40</span>
                          <span class="col">广阜屯</span>
                          <span class="col">70%</span>
                          <span class="col">较差</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">9:45</span>
                          <span class="col">宝通寺</span>
                          <span class="col">70%</span>
                          <span class="col">较差</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">9:55</span>
                          <span class="col">洪山广场</span>
                          <span class="col">20%</span>
                          <span class="col">较好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">10:40</span>
                          <span class="col">青龙山地铁小镇</span>
                          <span class="col">20%</span>
                          <span class="col">较好</span>
                          <span class="icon-dot"></span>
                        </div>
                        <div class="row">
                          <span class="col timer">10:10</span>
                          <span class="col">湖北省博物馆</span>
                          <span class="col">40%</span>
                          <span class="col">良好</span>
                          <span class="icon-dot"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line2">
            <h2>武汉市区域车流拥堵指数统计</h2>
            <!-- 图表line -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel pie2">
            <h2>武汉市环线拥堵情况</h2>
            <!-- 图表pie -->
            <div class="chart"></div>
            <div class="panel-footer"></div>
          </div>
        </div>
      </section>


    <script src="js/flexible.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/myMap.js"></script>
    <script src="./js/index.js"></script>
    </div>
  </body>
</html>
